<template>
  <div>
    <span>主类目：</span>
    <select v-model="rci">
      <option value="0">全部</option>
      <option v-for="i in rootCategory" :value="i.id">{{i.name}}</option>
    </select>
    <button class="screen-btn" @click="screenGood">筛选</button>

    <input type="text" class="search-info-text"
           placeholder="可输入商品的名字、描述,商品类目,root类目..."
           v-model="n_d_gcn_rcn">

    <button class="search-btn" @click="searchGood">搜索</button>
    <button class="add-btn" @click="addClick">添加商品</button>
  </div>
</template>

<script>

  import {mapGetters} from "vuex";

  export default {
    name: "Neck",
    props: {
      rootCategory: { // 获取全部的root类目
        type: Array,
        default() {
          return []
        }
      },
      root_category_id: { // 获取筛选的root类目
        type: Number,
        default: 0,
      },
      goods_category_id: { // 获取搜索框商品类目id的内容
        type: Number,
        default: 0,
      },
      name_describe_goodsCategoryName_rootCategoryName: { // 搜索框内的内容
        type: String,
        default: ''
      }
    },
    data() { // 上面的值是需要用户选择并通过事件发射出去的,因此需要借助双向绑定,但是props不能双向绑定,所以要使用data接收(或者computed)
      return {
        // rns: this.rootCategory, // 所以root类目
        rci: this.root_category_id, // 准备选择哪个select框
        gcd: this.goods_category_id, // 准备渲染到搜索商品id的框
        n_d_gcn_rcn: this.name_describe_goodsCategoryName_rootCategoryName // 准备渲染到搜索商品的框
      }
    },
    mounted() {
    },
    methods: {
      screenGood() {
        this.$emit('screen', {
          rci: this.rci,
          gcd: this.gcd,
          n_d_gcn_rcn: this.n_d_gcn_rcn
        })
      },
      searchGood() {
        this.$emit('search', {
          rci: this.rci,
          gcd: this.gcd,
          n_d_gcn_rcn: this.n_d_gcn_rcn
        })
      },
      addClick() {
        this.$router.push('/user/goods/add')
      },
    }
  }
</script>

<style scoped>
  div {
    position: relative;
  }
  div select {
    width: 120px;
    height: 30px;
    margin-right: 10px;

    border-radius: 4px;
    border: 1px solid #cdcdcd;
    background-color: #fff;
  }
  div .screen-btn {
    height: 30px;
    width: 60px;
    color: white;
    border-radius: 4px;

    outline: none;
    border: none;
    background-color: goldenrod;/*007bff*/
  }
  div .screen-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }

  div .search-gid-text {
    /*position: absolute;*/

    width: 200px;
    height: 28px;
    transform: translateX(40px);
  }
  div .search-info-text {
    width: 300px;
    height: 28px;
    transform: translateX(60px);
  }
  div .search-btn {
    height: 32px;
    width: 100px;
    color: white;
    border-radius: 4px;
    background-color: goldenrod;/*007bff*/
    transform: translateX(70px);

    outline: none;
    border: none;
  }
  div .search-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }
  div .add-btn {
    position: absolute;
    right: 0;
    top: 16px;

    height: 30px;
    width: 90px;
    color: white;
    border-radius: 4px;
    background-color: #28a745;

    outline: none;
    border: none;
  }
  div .add-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }
</style>